<template>
  <div>
    <header>
      <h1>大数据可视化</h1>
    </header>
    <!-- 页面大容器 -->
    <section class="box">
      <section class="itemLeft">
        <ItemPage>
          <itemOne />
        </ItemPage>
        <ItemPage>
          <itemTwo />
        </ItemPage>
      </section>
      <section class="itemCenter">

      </section>
      <section class="itemRight">
        <ItemPage>
          <itemThree />
        </ItemPage>
        <ItemPage>
          <itemFour />
        </ItemPage>
      </section>



    </section>
  </div>
</template>
<script>
import ItemPage from "@/components/itemPage.vue"
import itemOne from "@/components/itemOne.vue"
import itemTwo from "@/components/itemTwo.vue"
import itemThree from "@/components/itemThree.vue"
import itemFour from "@/components/itemFour.vue"

export default {
  components: {
    ItemPage, itemOne, itemThree, itemTwo, itemFour
  }

};
</script>
<style lang="less">
header {
  font-size: 18px;
  text-align: center;
  line-height: 40px;
}

.box {
  min-width: 1200px;
  max-width: 2400px;
  padding: 10px, 10px;
  margin: 0 auto;
  display: flex;

  .itemLeft,
  .itemRight {
    flex: 3;

  }

  .itemCenter {
    flex: 5;
    height: 840px;
    border: gray 1px solid;
    padding: 10px;
    margin: 20px;
  }
}
</style>